<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">对外担保信息</span>
      </el-col>
    </el-row>
    <el-row style="justify-content: center">
      <el-button @click="addRow()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-show="tableData.length === 0 && canEdit && editable" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px">添加对外担保信息</span>
      </el-button>
      <el-button type="primary"
                 @click="addRow()"
                 style="padding: 0px 18px 0px 8px;line-height: 36px;margin: 12px 0px"
                 v-show="editable && canEdit && !showForm && tableData.length > 0" round>
        <i class="joys-icon-addagain" style="margin-right: 18px;"/>
        <span style="margin: 0px;display: inline-block;font-size: 14px;">继续添加</span>
      </el-button>
      <span v-if="tableData.length === 0 && !editable">没有数据</span>

    </el-row>

    <transition name="el-zoom-in-top">
      <el-form :model="formData"
               ref="formData"
               :rules="rules"
               :class="{cardBackColor:!canEdit}"
               style="text-align: left;padding-top: 28px"
               v-show="showForm" inline>
        <el-row style="padding:0px 12px 24px 12px">
          <el-row>
            <el-col :md="8" :lg="6">
              <el-form-item label="被担保人" prop="companyAgency">
                <ft-input size="small" :editable="!canEdit" v-model="formData.companyAgency"
                          placeholder="请输入内容"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="被担保人类型" prop="options.companyAgencyType">
                <ft-enum-select v-model="formData.options.companyAgencyType"
                                service-name="lss-customer"
                                type-name="customerType"
                                :editing="!canEdit"
                                ></ft-enum-select>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="证件类型" prop="options.certificateType">
                <ft-enum-select v-if="formData.options.companyAgencyType == 'PERSONAL'"
                                v-model="formData.options.certificateType"
                                :editing="!canEdit"
                                service-name="lss-customer"
                                type-name="personalType"/>
                <ft-enum-select v-else
                                v-model="formData.options.certificateType"
                                service-name="lss-customer"
                                :editing="!canEdit"
                                type-name="certificateType"/>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="证件号码" prop="options.certificateNum">
                <ft-input size="small" :editable="!canEdit" v-model="formData.options.certificateNum"
                          placeholder="请输入内容"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="担保项目名称" prop="options.guaranteeProName">
                <ft-input size="small" :editable="!canEdit" v-model="formData.options.guaranteeProName"
                          placeholder="请输入内容"></ft-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="担保方式" prop="options.guaranteeType">
                <ft-input :editable="!canEdit" v-model="formData.options.guaranteeType" placeholder="请输入内容"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6" v-if="showForm">
              <el-form-item label="非正常担保" prop="options.normalGuarantee">
                <el-radio v-model="formData.options.normalGuarantee" :disabled="canEdit" label="MALE" style="margin-left: 8px">有</el-radio>
                <el-radio v-model="formData.options.normalGuarantee" :disabled="canEdit" label="FEMALE">无</el-radio>
                <!--<span v-if="canEdit" style="padding: 8px 0px 8px 8px">{{formData.options.normalGuarantee}}</span>-->
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="担保金额" prop="options.guaranteeAmount">
                <ft-number-input v-model="formData.options.guaranteeAmount"
                                 :editable="!canEdit"
                                 :precision='[16,2]'
                ></ft-number-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="起始日" prop="startDate">
                <ft-date-picker v-model="formData.startDate"
                                :value-format="format"
                                :editing="!canEdit">
                </ft-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="截止日" prop="endDate">
                <ft-date-picker v-model="formData.endDate"
                                :value-format="format"
                                :editing="!canEdit">
                </ft-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
            <el-col :md="24" :lg="24">
              <el-form-item label="备注" prop="remark">
                <ft-input type="textarea" :editable="!canEdit" :autosize='{ minRows: 1, maxRows: 5}' v-model="formData.remark"></ft-input>
              </el-form-item>
            </el-col>
        </el-row>

        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

        <el-row style="padding:16px 0px">
          <el-col align="right" v-show="!canEdit">
            <el-button size="mini"
                       @click="handleCancel()">取消
            </el-button>
            <el-button size="mini"
                       type="primary"
                       @click="handleSave()"
                       style="margin-left: 24px;margin-right: 36px">保存
            </el-button>
          </el-col>
          <el-col align="right" v-show="canEdit">
            <el-button size="mini"
                       style="margin-left: 24px;margin-right: 36px"
                       @click="handleCancel()">返回
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </transition>

    <transition name="el-zoom-in-top">
      <el-table v-show="tableData.length > 0 && !showForm"
                tooltip-effect="light"
                :data="tableData">
        <el-table-column label="被担保人" min-width="120px" prop="companyAgency" show-overflow-tooltip align="left">
          <template slot-scope="scope">
            <ft-link-text @click="handleCard(scope.$index,scope.row)"
                          :text="scope.row.companyAgency">
            </ft-link-text>
          </template>
        </el-table-column>
        <el-table-column label="证件类型" min-width="120px" prop="options.certificateType" align="left">
          <template slot-scope="scope">
            <ft-enum-select v-if="scope.row.options.companyAgencyType == 'PERSONAL'"
                            v-model="scope.row.options.certificateType"
                            :editing="false"
                            service-name="lss-customer"
                            type-name="personalType"
                            size="small"/>
            <ft-enum-select v-else
                            v-model="scope.row.options.certificateType"
                            service-name="lss-customer"
                            :editing="false"
                            type-name="certificateType"
                            size="small"/>
          </template>
        </el-table-column>
        <el-table-column label="证件号码" min-width="120px" prop="options.certificateNum" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column label="担保项目名称" min-width="120px" prop="options.guaranteeProName" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column label="担保方式" min-width="120px" prop="options.guaranteeType" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column v-if="editable" label="操作" align="center" min-width="120px">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
              <p>数据删除后，将不能恢复，确认删除？</p>
              <div style="text-align:right; margin:0">
                <el-button size="small"
                           @click="scope.row.delVisible=false">取消
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row,scope.$index)">确定</el-button>
              </div>
              <el-button slot="reference" type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </transition>
  </div>
</template>

<script>
    // import FtInput from "../ft/FtInput"
    import FtDatePicker from "../ft/FtDatePicker"
    import {existsCustNo, identityFormat,identityCorpFormat} from "@/pages/pc/assets/js/validate/rule.js"
    import {CUST_PERSON,CUST_CORP} from "@/pages/pc/assets/js/validate/constant.js"
    export default {
        name: "GuaranteeInfo",
      props: {
        customerId: {
          type : String,
          default : '',
        },
        editable: {
          type : Boolean,
          default : true,
        },
      },
      components: {FtDatePicker},
      mounted() {
        this.load()
      },
      data() {
        //根据证件号码判断是否合法
        let validateCustNum = (rule, value, callback) => {
          if (this.formData.options.companyAgencyType === CUST_CORP) {
            console.log(this.formData.options.certificateType)
            if (!identityCorpFormat(this.formData.options.certificateType, value)) {
              callback(new Error('输入的证件号码不合法'))
            }
            else {
              existsCustNo(this, rule, value, callback)
            }
        }
        else {
          if (!identityFormat(this.formData.options.certificateType, value)) {
            callback(new Error('输入的证件号码不合法'))
          }
          else {
            existsCustNo(this, rule, value, callback)

            }
          }};
        let validateDate = (rule, value, callback) => {
          const not_null_flag = this.formData.startDate && this.formData.endDate &&
            this.formData.startDate != '' && this.formData.endDate != '';
          if (not_null_flag && this.formData.startDate > this.formData.endDate) {
            callback(new Error('截止时间 不能早于起始时间'))
          } else {
            callback()
          }
        };
        return {
          format: 'yyyy-MM-dd',
          tableData: [],
          tableEnumEdit: false,
          dataVersion: "",
          shId: "",
          investmentInfo: {},
          formBack: {},
          formData: {
            options: {
              //被担保人类型
              companyAgencyType: '',
              //证件类型
              certificateType: '',
              //证件号码
              certificateNum: '',
              //担保项目名称
              guaranteeProName: '',
              //担保方式
              guaranteeType: '',
              //担保金额
              guaranteeAmount: '',
              //业务类型 对外担保
              businessType: 'foreignGuarantee',
            }
          },
          showForm: {
            type: Boolean,
            default: false
          },
          canEdit: true,
          rules: {
            companyAgency: [
              {required: true, message: '被担保人不能为空', trigger: 'blur'},
              {max: 80, message: '不能超过80字符', trigger: 'blur'}
            ],
            'options.certificateType': [
              {required: true, message: '证件类型不能为空', trigger: 'blur'},
            ],
            'options.companyAgencyType': [
              {required: true, message: '被担保人类型不能为空', trigger: 'blur'},
            ],
            'options.certificateNum': [
              {required: true, message: '证件号码不能为空', trigger: 'blur'},
              {max: 50, message: '不能超过50字符', trigger: 'blur'},
              {validator: validateCustNum, trigger: 'blur'}
            ],
            'options.guaranteeType': [
              {required: true, message: '担保方式不能为空', trigger: 'blur'},
              {max: 80, message: '不能超过80字符', trigger: 'blur'}
            ],
            'options.normalGuarantee': [
              {required: true, message: '请确认有无非正常担保', trigger: 'blur'},
            ],
            'options.guaranteeAmount': [
              {required: true, message: '担保金额不能为空', trigger: 'blur'},
            ],
            'options.guaranteeProName': [
              {max: 80, message: '不能超过80字符', trigger: 'blur'}
            ],
            startDate: [
              {required: true, message: '起始日期不能为空', trigger: 'blur'},
              {validator: validateDate, trigger: 'blur'}
            ],
            remark: [
              {max: 200, message: '不能超过200字符', trigger: 'blur'}
            ],
            endDate: [
              {required: true, message: '截止日期不能为空', trigger: 'blur'},
              {validator: validateDate, trigger: 'blur'}
            ],
            'options.certificateType': [
              {required: true, message: '证件类型不能为空', trigger: 'blur'},
            ]
          },
        }
      },
      methods: {
        load() {
          this.$http.get('/joys-rest/lss-customer/financing/',{
            params: {
              customerId:this.customerId,
              businessType:'foreignGuarantee'
            }
          }).then(
            resp => {
              this.tableData = resp.body.rows
              this.showForm = false
            }, resp => {
              this.$message.error(resp.body)
            })
        },
        //列表删除按钮
        handleDelete(row,index) {
          this.$http.delete('/joys-rest/lss-customer/financing/' + row.financingInfoId).then(
            resp => {
              this.tableData.splice(index,1);
              this.$message.success('删除成功!')
            },
            resp => {
              this.$message.error(resp.body)
          })
        },
        //列表取消
        handleCancel() {
          this.showForm = false
          this.canEdit = true
          this.$refs.formData.clearValidate()
        },
        //列表编辑按钮
        handleEdit(row) {
          this.formData = JSON.parse(JSON.stringify(row))
          this.canEdit = false
          this.showForm = true
        },
        //列表增行
        addRow() {
          this.formData = {
            customerId: this.customerId,
            businessType:'foreignGuarantee',
            options:{
              //证件类型
              certificateType:'',
              //证件号码
              certificateNum:'',
              //担保项目名称
              guaranteeProName:'',
              //担保方式
              guaranteeType:'',
              //担保金额
              guaranteeAmount:''
            },
          }
          this.index = -1
          this.canEdit = false
          this.showForm = true
        },
        //保存
        handleSave() {
          this.$refs.formData.validate((valid) => {
            if (valid) {
              this.$http.put('/joys-rest/lss-customer/financing/', this.formData).then(
                resp => {
                  this.load()
                  this.canEdit = true;
                  this.showForm = false
                }, resp => {
                  this.$message.error(resp.body);
                  this.canEdit = false
                }
              )
            } else {
              return false;
            }
          })
        },
        //列表卡片按钮
        handleCard(index, row) {
          this.formData = row;
          this.canEdit = true;
          this.showForm = true
        },
        //字数较多时，超出部分用...显示
        convertInputValue(val){
          if(null != val && '' != val && val.length >9){
            return val.substr(0,9)+'...'
          }
          return val
        }
      }
    }
</script>

<style scoped>

</style>
